<template>
 <el-card>
    <el-container style="flex-direction:column;">
      <el-form :model="commodityData" :rules="rules" ref="ruleForm" label-width="100px" size="small">
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品名称" prop="commodityName">
              <el-input  v-model="commodityData.commodityName" autocomplete="off" placeholder="请输入商品名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="门店名称" prop="name">
              <el-input  :disabled="true" v-model="commodityData.name" autocomplete="off" placeholder="请输入商品名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="商品规格" prop="isMultiSpecification">
          <el-radio-group v-model="commodityData.isMultiSpecification" :disabled="true">
            <el-radio :label="0">单规格</el-radio>
            <el-radio :label="1">多规格</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label v-if="commodityData.isMultiSpecification == 0">
          <el-table size="mini" :data="commodityData.commodityDetailsDTOList" style="width: 100%">
            <el-table-column prop="price" label="售价">
              <template slot-scope="scope">
                <el-input v-model="scope.row.price" autocomplete="off"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="cost" label="成本">
              <template slot-scope="scope">
                <el-input v-model="scope.row.cost" autocomplete="off"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="stock" label="库存">
              <template slot-scope="scope">
                <el-input v-model.number="scope.row.stock" autocomplete="off"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="introduction" label="商品简介" width="200px">
              <template slot-scope="scope">
                <el-input v-model="scope.row.introduction" autocomplete="off"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <div v-if="commodityData.isMultiSpecification == 1">
          <el-form-item label="">
            <el-table size="mini" :data="commodityData.commodityDetailsDTOList" style="width: 100%">
              <el-table-column
                v-for="item in commodityData.specificationsDTO.typeGroupDTOList"
                :key="item.typeGroupId"
                :label="item.typeGroupName"
              >
                <template slot-scope="scope">
                  <div v-for="gitem in scope.row.groupValueList" :key="gitem.groupValueId">
                    <div v-if="gitem.typeGroupId == item.typeGroupId">{{gitem.groupValueName}}</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="price" label="售价">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.price" autocomplete="off"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="cost" label="成本">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.cost" autocomplete="off"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="stock" label="库存">
                <template slot-scope="scope">
                  <el-input v-model.number="scope.row.stock" autocomplete="off"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="introduction" label="商品简介" width="200px">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.introduction" autocomplete="off"></el-input>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </div>
        <el-form-item label="商品图片" prop="image">
          <el-upload
            class="avatar-uploader"
            :action="baseURL + '/commodity/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="commodityData.image" :src="baseURL + commodityData.image" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否上架" prop="isShow">
              <el-radio-group v-model="commodityData.isShow">
                <el-radio :label="1">上架中</el-radio>
                <el-radio :label="0">待上架</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品排序">
              <el-input-number
                style="width: 100%;"
                v-model="commodityData.sort"
                controls-position="right"
                :min="1"
                :max="999"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
        </el-form-item>
      </el-form>
    </el-container>
  </el-card>
</template>
<script>
import {baseURL,imgUrlbaseURL} from '@/utils/setting.js'
import {getCommodityById,updateCommodity} from '@/api/modules/CommodityManagement/manageGoods.js'
export default {
  data() {
    return {
      commodityData:{},
      rules: {
        storeName: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
        ],
        price: [
          { required: true, message: '请输入商品价格', trigger: 'blur' },
        ],
        cost: [
          { required: true, message: '请输入商品成本', trigger: 'blur' },
        ],
        sales: [
          { required: true, message: '请输入商品销量', trigger: 'blur' },
        ],
        stock: [
          { required: true, message: '请输入商品库存', trigger: 'blur' },
        ],
        classificationId: [
          {  required: true, message: '请选择商品分类', trigger: 'change' }
        ]
      },
    }
  },
  computed:{
    baseURL() {return baseURL},
    imgUrlbaseURL() {return imgUrlbaseURL},
  },
  created(){
    getCommodityById({id:parseInt(this.$route.params.commodity)}).then(res=>{
      // console.log(res.data.data)
      this.commodityData = res.data.data
    })
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!');
          let data ={
            commodity:this.commodityData.commodity,
            image:this.commodityData.image,
            commodityName:this.commodityData.commodityName,
            isShow:this.commodityData.isShow,
            sort:this.commodityData.sort,
            commodityDetailsList:this.commodityData.commodityDetailsDTOList
          }
          updateCommodity(data).then(()=>{})
        } else {
          // console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleAvatarSuccess(res) {
      // console.log(res,file)
      // this.imageUrl = URL.createObjectURL(file.raw);
      this.commodityData.image = res.data
    },
    beforeAvatarUpload(file) {
      // console.log(file)
      let data = ['image/png','image/jpeg'];
      if(!data.includes(file.type)){
        this.$message.error('上传商品分类图片只能是 png或JPG 格式!');
        return false;
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传商品分类图片大小不能超过 2MB!');
        return false;
      }
      return true;
    }
  }
}
</script>
<style scoped>
.el-select {
  width: 100%;
}
.avatar-uploader >>> .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader >>> .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>